<template>
  <div class="GdwyyAppViewAllWorkOrders flex flex-column">
    <div class="top rel flex-center font-12">
      <div class="flex-center date-box font-12">
        <img class="search-icon" src="~@assets/imgs/reconsitution/gdkq/iocn_zz.png" alt="" />
        <a-tree-select
          v-model="queryParam.orgId"
          show-search
          tree-data-simple-mode
          class="tree-select"
          :dropdown-style="{ minWidth: '58.6667vw', maxHeight: '106.6667vw', overflow: 'auto' }"
          :tree-data="treeData"
          treeNodeFilterProp="title"
          :treeDefaultExpandedKeys="treeDefaultExpandedKeys"
          @change="allRequest"
        />
        <img class="search-icon" src="~@assets/imgs/reconsitution/zl/jt_xl.png" alt="" />
        <div class="split"></div>
        <div @click="showDatePopup = true" class="flex flex-center">
          <van-icon name="notes-o" />
          <span class="date">{{ showDate }}</span>
          <img class="search-icon" src="~@assets/imgs/reconsitution/zl/jt_xl.png" alt="" />
        </div>
      </div>
    </div>

    <div class="flex-1 main-box">
      <div class="jfgd-main main-container">
        <GdwyyAppBigTitle title="交付工单" color="blue" icon="gdkq/icon_jfgd"></GdwyyAppBigTitle>
        <van-loading v-if="jfgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <GdwyyAppSmallTitle title="装机" dwText="个"></GdwyyAppSmallTitle>
          <div class="zj-box flex flex-between flex-center">
            <div class="left flex-center">
              <img class="left-icon" src="~@assets/imgs/reconsitution/gdkq/zj_gdzl.png" alt="" />
              <div>
                <div class="font-12 color666">工单总量</div>
                <div class="font-20 color333">{{ jfgd.JFGD_ZJ_GD_CNT || 0 }}</div>
              </div>
            </div>
            <div class="right flex flex-column">
              <div
                class="right-item flex-center"
                :class="{ 'mgb-6': index !== jfgdDesConfig.length - 1 }"
                v-for="(item, index) in jfgdZjDesConfig"
                :key="index + 'zj'"
              >
                <img
                  class="right-icon"
                  :src="require('../../../../assets/imgs/reconsitution/gdkq/' + item.icon + '.png')"
                />
                <div class="font-12 color666 flex-s-0">{{ item.label }}</div>
                <div class="font-13 color333 flex-1 right-num">{{ jfgd[item.model] || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="zj-box-bottom">
            <div
              v-for="(item, index) in jfgdDesConfig"
              :key="index + 'zj-bottom'"
              class="bottom-item flex flex-column flex-center"
            >
              <img
                class="bottom-icon"
                :src="require('../../../../assets/imgs/reconsitution/gdkq/zj_icon_' + item.icon + '.png')"
              />
              <div class="font-12 color666">{{ item.label }}</div>
              <div class="font-15 color333">{{ jfgd[jfdgZjDesConfig[index].model] || 0 }}</div>

              <div v-if="item.desLabel" class="font-11 circle-title color999">
                {{ item.desLabel }} {{ Math.round((jfgd[jfdgZjDesConfig[index].desModel] || 0) * 100) }}%
              </div>
            </div>
          </div>

          <GdwyyAppSmallTitle title="移机" dwText="个"></GdwyyAppSmallTitle>
          <div class="yj-box">
            <div v-for="(item, index) in jfgdDesConfig" :key="index + 'yj'" class="yj-item">
              <div class="flex-center">
                <img
                  class="yj-icon"
                  :src="require('../../../../assets/imgs/reconsitution/gdkq/yj_icon_' + item.icon + '.png')"
                />
                <div class="font-13 color666">{{ item.label }}</div>
              </div>
              <span class="font-20 color333 yj-num">{{ jfgd[jfdgYjDesConfig[index].model] || 0 }}</span>
              <span v-if="item.desLabel" class="font-12 color999"
                >{{ item.desLabel }} {{ Math.round((jfgd[jfdgYjDesConfig[index].desModel] || 0) * 100) }}%</span
              >
            </div>
          </div>

          <GdwyyAppSmallTitle title="修机" dwText="个"></GdwyyAppSmallTitle>
          <div class="xj-top-box">
            <div
              :class="[`top-item__bg${index}`]"
              class="top-item flex-center"
              v-for="(item, index) in jfgdXjConfig"
              :key="index + 'xj'"
            >
              <img
                class="top-icon"
                :src="require('../../../../assets/imgs/reconsitution/gdkq/' + item.icon + '.png')"
              />
              <div>
                <div class="font-14 color666">{{ item.label }}</div>
                <div class="font-20 color333">{{ jfgd[item.model] || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="xj-bottom-box">
            <div class="bottom-item flex-column" v-for="(item, index) in jfgdXjDesConfig" :key="index + 'xj'">
              <img
                class="bottom-icon"
                :src="require('../../../../assets/imgs/reconsitution/gdkq/' + item.icon + '.png')"
              />
              <div class="font-13 color666">{{ item.label }}</div>
              <div class="font-18 color000 bottom-num">{{ jfgd[item.model] || 0 }}</div>
              <div v-if="item.desLabel" class="font-12 color999">
                {{ item.desLabel }}：{{ Math.round((jfgd[item.desModel] || 0) * 100) }}%
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="fwgd-main main-container">
        <GdwyyAppBigTitle title="服务工单" color="red" icon="gdkq/icon_fwgd"></GdwyyAppBigTitle>
        <van-loading v-if="fwgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <div v-for="(item, index) in fwgdConfig" :key="index + 'fwgd'">
            <GdwyyAppSmallTitle :title="item.title" dwText="个"></GdwyyAppSmallTitle>
            <div class="flex-center flex-between rel">
              <div class="left flex-column flex-center">
                <div class="font-20 color333 num">{{ fwgd[item.model] || 0 }}</div>
                <div class="font-12 color666 mgt">任务总数</div>
              </div>
              <div class="right">
                <div class="flex mgb-6" v-for="(ite, ind) in fwgdDesConfig" :key="ind + 'li'">
                  <div class="color666 font-12 flex-s-0">
                    <img
                      class="ite-icon"
                      :src="require('../../../../assets/imgs/reconsitution/gdkq/' + ite.icon + '.png')"
                    />
                    {{ ite.label }}
                  </div>
                  <div class="font-13 color333 flex-1 des-num">
                    {{
                      ite.label === '完成率'
                        ? fwgd[item.listModel[0]] && fwgd[item.model]
                          ? (fwgd[item.listModel[0]] / fwgd[item.model]).toFixed(2) * 100 + '%'
                          : '0%'
                        : fwgd[ite.model] || 0
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="yxgd-main main-container">
        <div class="flex-center title-box flex-between">
          <GdwyyAppBigTitle title="营销工单" icon="gdkq/icon_yxgd" time=""></GdwyyAppBigTitle>
          <div class="date-box form-box flex-s-0 flex-center" @click="showmarketType = true">
            <span class="date">任务名称：</span>
            <span class="date">{{ marketTypeLabel }}</span>
            <img class="search-icon" src="~@assets/imgs/reconsitution/zl/jt_xl.png" alt="" />
          </div>
        </div>
        <van-loading v-if="yxgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd" v-else>
          <GdwyyAppSmallTitle title="营销任务"></GdwyyAppSmallTitle>
          <div class="content-box mgb">
            <div class="item-box flex-center" v-for="(item, index) in yxgdCardList" :key="index + 'yxgd'">
              <img
                class="icon"
                :src="require(`../../../../assets/imgs/reconsitution/gdkq/icon_${item.icon}.png`)"
                alt=""
                srcset=""
              />
              <div class="right">
                <div class="font-12 color666">{{ item.label }}</div>
                <div class="font-20 color333">{{ yxgd[item.model] || 0 }}</div>
              </div>
            </div>
          </div>
          <div class="flex flex-between fill-w">
            <div class="font-14 circle-title">本月办理情况</div>
            <div class="font-12 color999">单位：户</div>
          </div>
          <div class="fill-w" id="yxgd-echarts"></div>
        </div>
      </div>

      <div class="xdgd-main main-container">
        <GdwyyAppBigTitle title="巡店工单" color="green" icon="gdkq/icon_xdgd" time=""></GdwyyAppBigTitle>
        <van-loading v-if="xdgdLoading" type="spinner" color="#1989fa" />
        <div class="main-container-pd yxgd-main" v-else>
          <template v-for="(v, item, i) in xdgd">
            <GdwyyAppSmallTitle :title="item" :showDw="false"></GdwyyAppSmallTitle>
            <div class="content-box">
              <div class="flex-center item-box" v-for="(ite, ind) in xdgdCardList" :key="ind + 'xdgditem' + i">
                <img
                  class="icon"
                  :src="require(`../../../../assets/imgs/reconsitution/gdkq/${ite.icon}.png`)"
                  alt=""
                  srcset=""
                />
                <div class="right">
                  <div class="font-12 color666">{{ ite.label }}</div>
                  <div class="font-20 color333">
                    {{ ite.model === 'dyzxl' ? v.MONTH_EXE_PER * 100 || 0 : v[ite.model] || 0 }}
                    {{ ite.model === 'dyzxl' ? '%' : '' }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <van-popup v-model="showDatePopup" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="请选择账期"
        :loading="isLoadingShow"
        @cancel="showDatePopup = false"
        @confirm="handleChangeDate"
        :maxDate="maxDate"
      />
    </van-popup>

    <van-popup v-model="showmarketType" position="bottom">
      <van-picker
        show-toolbar
        title="请选择任务名称"
        :columns="marketTypeList"
        @confirm="handleSelectOptions"
        @cancel="showmarketType = false"
      />
    </van-popup>
  </div>
</template>
  
<script>
import { GdwyyAppBigTitle, GdwyyAppSmallTitle } from '@/components/reconsitution/index.js'
import { jfListConfig, _zyxBigListV2, _lchCallbackData } from '../components/morningEvening/common'
import GdwyyAppItemCard from '../components/morningEvening/components/itemCard.vue'
import dateTime from '@/components/common/dateTime.vue'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
import { showZwtNav } from '@/utils/showNav.js'
import { getAction, parseResultAction, postAction } from '@/api/manage'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import renderEcharts from './echarts'
import moment from 'moment'
import {
  fwgdDesMap,
  fwgdConfig,
  yxgdCardList,
  xdgdCardList,
  fwgdDesConfig,
  orgIdTransformMap,
  jfgdZjDesConfig,
  jfgdDesConfig,
  jfgdXjDesConfig,
  jfdgYjDesConfig,
  jfdgZjDesConfig,
  jfgdXjConfig,
} from './common'

const _apiConfig = [
  {
    url: '2c3a07178ba92724018c1f6b93850031',
    resultParamsName: 'jfgd',
    loading: 'jfgdLoading',
  },
  {
    url: '8a31cdd68b28dfb0018b552ebf4b0004',
    resultParamsName: 'fwgd',
    loading: 'fwgdLoading',
  },
]
export default {
  name: 'viewAllWorkOrders',
  props: {
    pageType: {
      type: String,
      default: 'morning',
    },
  },
  mixins: [reconsitutionMixin],
  components: { GdwyyAppBigTitle, GdwyyAppSmallTitle, GdwyyAppItemCard, dateTime },

  data() {
    return {
      queryParam: {
        gridId: '',
        dayId: '',
        orgId: '',
      },
      marketType: '',
      isLoadingShow: false,
      showDatePopup: false,
      currentDate: '',
      maxDate: null,
      jfgd: {},
      jfgdLoading: false,
      fwgd: {},
      fwgdLoading: false,
      yxgd: {},
      yxgdLoading: false,
      xdgdLoading: false,
      fwgdDesMap,
      fwgdConfig,
      yxgdCardList,
      xdgdCardList,
      fwgdDesConfig,
      xdgd: { 物业巡店: {}, 宣传巡店: {}, 实体网点巡店: {} },
      treeData: [],
      treeDefaultExpandedKeys: [],
      tempKey: '',
      marketTypeList: [],
      marketTypeLabel: '全部',
      showmarketType: false,
      jfgdZjDesConfig,
      jfgdDesConfig,
      jfgdXjDesConfig,
      jfdgYjDesConfig,
      jfdgZjDesConfig,
      jfgdXjConfig,
    }
  },

  computed: {
    showDate() {
      if (!this.queryParam.dayId) return ''
      const year = this.queryParam.dayId.substring(0, 4)
      const month = this.queryParam.dayId.substring(4, 6)
      const day = this.queryParam.dayId.substring(6)
      return `${year}-${month}-${day}`
    },
  },

  async created() {
    showZwtNav('工单看全')
    this.initData()
    this.geMarketTypeList()

    this.getUserPermission()
    // 如果因为之前的版本没有缓存VIRTUAL_USER_ORGCODE 自动默认为当前的营服
    let orgcode = Vue.ls.get('VIRTUAL_USER_ORGCODE') || localStorage.getItem('VIRTUAL_USER_ORGCODE_COPY')
    if (!orgcode) {
      orgcode = await this.getOrgCode()
      Vue.ls.set('VIRTUAL_USER_ORGCODE', orgcode)
    }
    const ids = orgcode.split('/')
    this.tempKey = ids[ids.length - 1]
    this.treeDefaultExpandedKeys = ids
    this.queryParam.orgId = ids[ids.length - 1]
    this.treeDefaultExpandedKeys = ids
  },

  methods: {
    async getOrgCode() {
      const { datapermissionMap } = Vue.ls.get(USER_INFO)
      const res1 = await postAction('/Sql2ApiCall/call/4028809589b9138c0189b933fa500001', {
        PARAMCODE: 'D',
        PAGECODE: 'root',
      })
      const jsonRes = JSON.parse(res1.result)
      const curDate = jsonRes.data.length ? jsonRes.data[0].value : '20230910'

      let params = {
        dayId: curDate || '20230910',
        type: '1001',
      }
      const gridIdList = localStorage.getItem('$gridIdList')
      const permissionOrgCode = datapermissionMap.map((k) => k.key).join('|')
      params = gridIdList
        ? {
            ...params,
            gridId: gridIdList,
          }
        : {
            ...params,
            orgRank: permissionOrgCode,
            depId: datapermissionMap[0].key,
          }
      const res = await postAction('/Sql2ApiCall/call/0500a9498233148c0182b53b0a030071', params)
      let target = ''
      if (res.success) {
        const data = JSON.parse(res.result).data
        for (let i = 0, length = data.length; i < length; i++) {
          if (data[i].GRID_ID === localStorage.getItem('$gridId')) {
            target = data[i].ORGRANK
            break
          }
        }
      }
      return Promise.resolve(target)
    },
    handleChangeDate(val) {
      let res = new Date(val).toLocaleDateString()
      res = res
        .split('/')
        .map((it) => it.padStart(2, '0'))
        .join('')
      this.queryParam.dayId = res
      // this.setAllRequest(_apiConfig, this.queryParam)
      this.allRequest()
      this.showDatePopup = false
    },
    getListModel(data, modelList = [], targetModel = '') {
      return data.map((item, index) => {
        const obj = {
          ...item,
          model: modelList[index],
        }
        targetModel && (obj.model = targetModel + item.model)
        return obj
      })
    },
    allRequest() {
      this.setAllRequest(_apiConfig, {
        ...this.queryParam,
        orgId: orgIdTransformMap[this.queryParam.orgId] || this.queryParam.orgId,
      })
      this.getxdgdData()
      this.getYxgdData()
    },
    initDataPostHook(data) {
      this.allRequest()
      this.maxDate = this.currentDate = this.filterDate(this.queryParam.dayId)
    },

    async geMarketTypeList() {
      const { result } = await parseResultAction('2c3a07178ba92724018c00c520fa0028', {})
      this.marketTypeList =
        [{ text: '全部', code: '' }].concat(
          result.map(({ MARKETING_TYPE, MARKETING_NAME }) => {
            return {
              text: MARKETING_NAME,
              code: MARKETING_TYPE,
            }
          })
        ) || []
    },

    async getxdgdData() {
      this.xdgdLoading = true
      const params = {
        ...this.queryParam,
        orgId: orgIdTransformMap[this.queryParam.orgId] || this.queryParam.orgId,
        monthId: this.queryParam.dayId.substring(0, 6),
      }
      console.log('ddd', orgIdTransformMap[this.queryParam.orgId])
      const res = await parseResultAction('2c3a07178ba92724018c488a02e50040', params)
      const res1 = await parseResultAction('2c3a07178ba92724018c488c5f300041', params)
      const res2 = await parseResultAction('2c3a07178ba92724018c488ded8a0042', params)
      this.xdgd = {
        物业巡店: res.result[0] || {},
        宣传巡店: res1.result[0] || {},
        实体网点巡店: res2.result[0] || {},
      }
      this.xdgdLoading = false
    },

    async getYxgdData() {
      this.yxgdLoading = true
      const params = {
        ...this.queryParam,
        marketingType: this.marketType,
        orgId: orgIdTransformMap[this.queryParam.orgId] || this.queryParam.orgId,
      }
      delete params.gridId
      const res = await parseResultAction('2c3a07178ba92724018c00d2fe300029', params)
      this.yxgd = (res.result || [])[0] || {}
      this.yxgdLoading = false
      this.getyxgdEcharts(params)
    },

    async getyxgdEcharts(params) {
      const res = await parseResultAction('2c3a07178ba92724018c0173765f002a', params)
      const data = res.result || []
      const keyVal = {}
      for (const item of data) {
        keyVal[item.DATE] = item.YX_XN_BLCG
      }
      const chartdata = []
      const x = []
      const start = moment(this.queryParam.dayId, 'YYYYMMDD').startOf('month').format('YYYYMMDD')
      for (let i = Number(start); i <= this.queryParam.dayId; i++) {
        x.push(i)
        chartdata.push(keyVal[i] || 0)
      }
      this.$nextTick(() => {
        !this.yxgdLoading && renderEcharts({ tagId: 'yxgd-echarts', data: { x, chartdata } })
      })
    },

    filterDate(datestr) {
      if (!datestr) return ''
      const year = datestr.substring(0, 4)
      const month = datestr.substring(4, 6)
      const day = datestr.substring(6)
      const date = `${year}/${month}/${day}`
      return new Date(date)
    },

    async getUserPermission() {
      const userInfo = Vue.ls.get(USER_INFO)
      const dataPermission = userInfo.datapermissionMap || []
      const orgRank = dataPermission.map((k) => k.value).join('|')
      const depId = dataPermission[0].key
      if (!dataPermission) return
      const v = await getAction('/sys/sysDepart/queryAllTreeListByOrgType', { id: depId, orgRank })
      this.queryParam.orgId = this.tempKey
      if (v.result.list.length == 0) {
        const userInfo = Vue.ls.get(USER_INFO)
        this.treeData = userInfo.datapermissionMap.map((v) => {
          const id = v.value
          const title = v.title
          const item = {
            id: id,
            key: id,
            value: id,
            title,
            isLeaf: true,
          }
          return item
        })
        return
      }
      function getAllCnTree(array = [], level = 0) {
        if (!array) return
        const hasChildren = v.children && v.children.length
        level += 1
        return array.map((v) => {
          const id = v.id
          const title = v.name
          const item = {
            id: id,
            key: id,
            value: id,
            title,
            isLeaf: hasChildren,
            level,
            children: getAllCnTree(v.children, level),
          }
          return item
        })
      }
      this.treeData = getAllCnTree(v.result.list)
    },
    handleSelectOptions({ text, code }) {
      this.marketType = code
      this.marketTypeLabel = text
      this.getYxgdData()
      this.showmarketType = false
    },
  },
}
</script>

<style lang="less">
.ant-select-dropdown,
.ant-select-tree-dropdown {
  width: 85%;
}
</style>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';

.GdwyyAppViewAllWorkOrders {
  height: 100vh;

  ::v-deep {
    .ant-select {
      width: 37.3333vw;
    }
    .ant-select-arrow {
      display: none;
    }
    .ant-select-selection {
      border: none;
    }
  }
  .top {
    width: 100%;
    height: 11.7333vw;
    line-height: 11.7333vw;
    padding: 0 4vw;
    background: #ffffff;
    box-shadow: 0 0.2667vw 1.0667vw 0.2667vw #f3f7fa;
    font-size: 4.5333vw;
    box-sizing: border-box;
  }
  .date-box {
    justify-self: flex-end;
    right: 4vw;
    .search-icon {
      widows: 3.7333vw;
      height: 3.7333vw;
    }
    .date {
      margin: 0 1.0667vw;
    }
    .split {
      width: 0.2667vw;
      height: 4vw;
      background: #eee;
      margin: 0 5.3333vw;
    }
  }
  .main-box {
    overflow-y: auto;
  }
  .show-more {
    margin-top: 2.6667vw;
    text-align: center;
  }
  .main {
    padding: 2.1333vw 2.1333vw 4vw 2.1333vw;
    background: #f3f7fa;
  }
  .main-container {
    background: #ffffff;
    border-radius: 1.6vw;
    box-sizing: border-box;
    margin-bottom: 4vw;
    &-pd {
      padding: 0 2.6667vw 2.6667vw 2.6667vw;
    }
  }
  .fwgd-main {
    .icon {
      width: 13.0667vw;
      height: 13.3333vw;
      margin-right: 2.1333vw;
    }
    .left {
      .bg('gdkq/dz_csgd.png');
      height: 13.3333vw;
      margin-left: 4vw;
    }
    .mgr-100 {
      margin-right: 26.6667vw;
    }
    .mgt {
      margin-top: 4vw;
    }
    .num {
      transform: translateY(-3.2vw);
    }
    .des-num {
      text-align: right;
    }
    .right {
      width: 54%;
      .mgb-6 {
        margin-bottom: 1.6vw;
      }
      .ite-icon {
        width: 3.7333vw;
        height: 3.7333vw;
        // margin-right: 1.6vw;
      }
    }
    ::v-deep {
      .small-title::before {
        background: @main-red-color;
      }
    }
  }

  .jfgd-main {
    margin-top: 4vw;
    ::v-deep {
      .GdwyyAppBigTitle {
        background-image: linear-gradient(180deg, rgba(194, 220, 255, 0.18) 0%, #ffffff 100%);
      }
    }

    .zj-box {
      .left-icon {
        width: 10.6667vw;
        height: 10.6667vw;
        margin-right: 2.6667vw;
      }
      .right {
        width: 50%;
      }
      .right-icon {
        width: 3.2vw;
        height: 3.2vw;
        margin-right: 1.8667vw;
      }
      .right-num {
        text-align: right;
      }
      .mgb-6 {
        margin-bottom: 1.6vw;
      }
    }
    .zj-box-bottom {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.6667vw;
      .bottom-item {
        .bg('gdkq/bg_zj.png');
        width: 28.2667vw;
        height: 26.6667vw;
        padding: 2.1333vw 0;
        line-height: 5.8667vw;
      }
      .bottom-icon {
        width: 4.2667vw;
        height: 4.2667vw;
        margin-bottom: 1.6vw;
      }
      .circle-title::before {
        width: 1.0667vw;
        height: 1.0667vw;
        border-color: @main-blue-color;
      }
    }
    .yj-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.6667vw;

      .yj-item {
        .bg('gdkq/bg-card-yj.png');
        width: 44vw;
        height: 17.6vw;
        padding: 1.8667vw 2.1333vw 1.0667vw 2.1333vw;
      }
      .yj-icon {
        width: 4.2667vw;
        height: 4.2667vw;
        margin-right: 1.0667vw;
      }
      .yj-num {
        margin-right: 2.1333vw;
        margin-left: 5.3333vw;
      }
    }

    .xj-top-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.6667vw;
      .top-item {
        padding: 3.2vw;
        .bg('gdkq/bg_xj_gdzl.png');
        width: 44vw;
        height: 25.6vw;
      }
      .top-icon {
        width: 8vw;
        height: 8vw;
        margin-right: 5.3333vw;
      }
      .top-item__bg1 {
        .bg('gdkq/bg_xj_yfzhs.png');
      }
    }
    .xj-bottom-box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.1333vw;
      margin-top: 3.7333vw;
      .bottom-item {
        background: #ffffff;
        box-shadow: 0 0.5333vw 1.0667vw 0.2667vw #f3f7fa;
        border-radius: 0.8vw;
        padding: 2.1333vw 1.3333vw 2.4vw 1.3333vw;
        width: 28.2667vw;
        height: 29.3333vw;
        // line-height: 5.8667vw;
        .bottom-icon {
          margin-bottom: 0.8vw;
          width: 4.8vw;
          height: 4.8vw;
        }
        .bottom-num {
          margin: 1.0667vw 0;
        }
      }
    }
  }

  .yxgd-main {
    #yxgd-echarts {
      height: 32vw;
    }
    .form-box {
      padding-right: 4vw;
    }
    .content-box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.6667vw;
    }
    .mgb {
      margin-bottom: 4vw;
    }
    .circle-title::before {
      border: 0.2667vw solid #4d98ff;
    }
    .item-box {
      .bg('gdkq/bg_csgd.png');
      width: 44vw;
      height: 21.3333vw;
      padding: 6.6667vw 5.0667vw;
      .icon {
        width: 8vw;
        height: 8vw;
        margin-right: 2.6667vw;
      }
    }
  }
  .xdgd-main {
    ::v-deep {
      .small-title::before {
        background: #46d1ce;
      }
    }
    .item-box {
      background: rgba(70, 209, 206, 0.04);
      border-radius: 1.0667vw;
      .icon {
        width: 6.1333vw;
        height: 6.1333vw;
        transform: translateY(-3.7333vw);
      }
    }
  }
}
</style>